import React from "react";
//const echarts = require('echarts');
import echarts from 'echarts';
import 'echarts-gl';

var dataCount = 0;
var CHUNK_COUNT = 230;
var ROOT_PATH ="https://echarts.cdn.apache.org/examples/";
function fetchData(myChart, idx) {
    if (idx >= CHUNK_COUNT) {
        return;
    }
    var dataURL = ROOT_PATH + 'data/asset/data/gps/gps_'+ idx + '.bin';
    var xhr = new XMLHttpRequest();    
    xhr.open('GET', dataURL, true);
    xhr.setRequestHeader("Cache-Control","no-cache");
    xhr.responseType = 'arraybuffer';

    xhr.onload = function (e) {
        var rawData = new Int32Array(this.response);
        var data = new Float32Array(rawData.length);
        var addedDataCount = rawData.length / 2;
        for (var i = 0; i < rawData.length; i += 2) {
            data[i] = rawData[i+1] / 1e7;
            data[i+1] = rawData[i] / 1e7;
        }

        myChart.appendData({
            seriesIndex: 0,
            data: data
        });

        fetchData(myChart, idx + 1);
    }

    xhr.send();
}

var option = {
    backgroundColor: '#000',
    title: {
        text: 'Scatter GL',
            left: 'center',
        textStyle: {
            color: '#fff'
        }
    },
    geo: {
        map: 'china',
        roam: true,
        label: {
            emphasis: {
                show: false
            }
        },
        silent: true,
        itemStyle: {
            normal: {
                areaColor: '#323c48',
                borderColor: '#111'
            },
            emphasis: {
                areaColor: '#2a333d'
            }
        }
    },
    series: [{
        name: '弱',
        type: 'scatterGL',
        progressive: 1e6,
        coordinateSystem: 'geo',
        symbolSize: 1,
        zoomScale: 0.002,
        blendMode: 'lighter',
        large: true,
        itemStyle: {
            color: 'rgb(20, 15, 2)'
        },
        postEffect: {
            enable: true
        },
        silent: true,
        dimensions: ['lng', 'lat'],
        data: new Float32Array()
    }]
};


class App extends React.Component {
    componentDidMount() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('scatterGL-scatter'));
        fetchData(myChart, 0);
        // 绘制图表
        myChart.setOption(option);
        
    }
    render() {
        return (
            <div id="scatterGL-scatter" style={{ width: '100%', height: 600 }}>121</div>
        )
    }
}
export default App;